<script setup lang="tsx">
import { reactive, ref } from 'vue'
// import type { TableData } from '@/api/table/types'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { ContentWrap } from '@/components/ContentWrap'
import { apiData, codeData } from '../apiData'
import { ElCollapse, ElCollapseItem, ElDivider, ElInput, ElTable, ElTableColumn, ElText } from 'element-plus'
import { Table, TableColumn } from '@/components/Table'
import { CodeEditor } from '@/components/CodeEditor'
import { JsonEditor } from '@/components/JsonEditor'
import { request2 } from '@/axios/request'

const $route = useRoute()
const { push, go } = useRouter()

const data = reactive({
  name: '/',
  type: '/',
  url: '/',
  method: '/',
  params: [],
  des: '/',
  share: '/',
  publishTime: '/'
})

const params = reactive<any[]>([])
const testResult = reactive({})

const paramsColumns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index',
    align: 'center',
    headerAlign: 'center'
  },
  {
    field: 'name',
    label: '参数名称',
    headerAlign: 'center',
    align: 'center',
    showOverflowTooltip: false,
    width: 250
  },
  {
    field: 'type',
    label: '参数类型',
    align: 'center',
    headerAlign: 'center',
    width: 250
  },
  {
    field: 'required',
    label: '参数状态',
    align: 'center',
    headerAlign: 'center',
    formatter: (data) => {
      return data.required ? '必填' : '选填'
    },
    width: 250
  },
  {
    field: 'des',
    label: '描述',
    align: 'center',
    headerAlign: 'center',
  },
  {
    field: 'default',
    label: '默认值',
    align: 'center',
    headerAlign: 'center',
  }
])

const firstActiveNames = ref(['1'])
const secondActiveNames = ref(['2'])
const thirdActiveNames = ref(['3'])
const fourthActiveNames = ref(['4'])

const content = ref('')
const result = ref({})

const test = () => {

  if (data.method == 'get') {
    let params_str = '?'
    for (const param of params) {
      if (param.value) {
        params_str += `${param.name}=${param.value}&`
      }
    }
    request2.get<any>(data.url + params_str).then(res => {
      Object.assign(testResult, res)
    })
  } else if (data.method == 'post') {
    const query = {}
    for (const param of params) {
      if (param.value) {
        query[param.name] = param.value
      }
    }

    request2.post<any>(data.url, query).then(res => {
      Object.assign(testResult, res)
    })
  }
}

const resetContent = () => {
  content.value = codeData.find(item => item.name == $route.query.name)?.code!
}

// const id = ref('')

const schema = reactive<DescriptionsSchema[]>([
  {
    field: 'name',
    label: '资源名称',
    labelAlign: "center",
    labelClassName: 'my-label'
  },
  {
    field: 'type',
    label: '资源类型',
    slots: {
      default: () => {
        return <span>{data.type == '/' ? '/' : '数据请求接口'}</span>
      }
    },
    labelAlign: "center",
    labelClassName: 'my-label'
  },
  {
    field: 'share',
    label: '共享类型',
    slots: {
      default: () => {
        let text = '/'
        switch (data.share) {
          case 'public':
            text = '对外开放'
            break
          case 'limit':
            text = '有条件共享'
            break
          default:
            text = '/'
        }
        return (
          <span>{text}</span>
        )
      }
    },
    labelAlign: "center",
    labelClassName: 'my-label'
  },
  {
    field: 'condition',
    label: '共享条件',
    slots: {
      default: () => {
        return (
          <span>暂无数据</span>
        )
      }
    },
    labelAlign: "center",
    labelClassName: 'my-label'
  },
  {
    field: 'shareType',
    label: '开放类型',
    slots: {
      default: () => {
        let text = '/'
        switch (data.share) {
          case 'public':
            text = '可对公众开放'
            break
          case 'limit':
            text = '不可对社会公众开放'
            break
          default:
            text = '不可对社会公众开放'
        }
        return (
          <span>{text}</span>
        )
      }
    },
    labelAlign: "center",
    labelClassName: 'my-label'
  },
  {
    field: 'shareCondition',
    label: '开放条件',
    slots: {
      default: () => {
        return (
          <span>暂无数据</span>
        )
      }
    },
    labelAlign: "center",
    labelClassName: 'my-label'
  },
  {
    field: 'des',
    label: '资源描述',
    labelAlign: "center",
    labelClassName: 'my-label',
    span: 24
  }
])

onMounted(() => {
  Object.assign(data, apiData.find(item => item.name == $route.query.name))
  resetContent()
  const paramsData: any[] = []
  for (const param of apiData.find(item => item.name == $route.query.name)?.params!) {
    paramsData.push({
      name: param.name,
      value: param.example,
      type: param.type,
      required: param.required
    })
  }

  Object.assign(params, paramsData)
  result.value = codeData.find(item => item.name == $route.query.name)?.res!
})
</script>

<template>
  <!-- title去掉了整个头都没了 -->
  <ContentWrap title=" " @back="push('/encoding/encoding-application')">
    <template #header>
      <BaseButton @click="go(-1)"> 返回 </BaseButton>
    </template>
    <div style="padding: 0 50px;">
      <Descriptions :schema="schema" :data="data" />
      <ElDivider />
      <div class="ml-20px">
        <div class="font-size-22px mb-16px">参数信息</div>
        <div class="font-size-16px mb-16px">调用地址：<ElText type="primary" size="large">http://58.48.30.30:17090/api/{{ data.url
            }}
          </ElText>
        </div>
        <div class="font-size-16px mb-16px">请求方式：<ElText type="success" size="large">{{ data.method }} </ElText>
        </div>
        <ElCollapse v-model="firstActiveNames" class="mt-12px">
          <ElCollapseItem name="1">
            <template #title>
              <span class="pl-12px font-size-18px">请求参数</span>
            </template>
            <div class="pr-20px mt-12px">
              <Table :columns="paramsColumns" :data="data.params" />
            </div>
          </ElCollapseItem>
        </ElCollapse>
        <ElCollapse v-model="fourthActiveNames" class="mt-12px">
          <ElCollapseItem name="4">
            <template #title>
              <span class="pl-12px font-size-18px">接口测试</span>
            </template>
            <div class="pr-20px mt-12px" style="display: flex;justify-content: space-between;">
              <div style="width: 59%;">
                <!-- <Table :columns="testParamsColumns" :data="params" /> -->
                <ElTable :data="params">
                  <ElTableColumn label="序号" type="index" width="60" header-align="center" align="center" />
                  <ElTableColumn prop="name" label="参数名称" width="150" header-align="center" align="center" />
                  <ElTableColumn prop="type" label="参数类型" width="150" header-align="center" align="center" />
                  <ElTableColumn prop="required" label="参数状态" width="150" header-align="center" align="center" />
                  <ElTableColumn label="参数值" header-align="center" align="center">
                    <template #default="scope">
                      <ElInput v-model="scope.row.value" />
                    </template>
                  </ElTableColumn>
                </ElTable>
              </div>
              <div style="width: 39%">
                <BaseButton @click="test">测试</BaseButton>
                <JsonEditor class="mt-12px" v-model="testResult" />
              </div>
            </div>
          </ElCollapseItem>
        </ElCollapse>
        <ElCollapse v-model="secondActiveNames" class="mt-12px">
          <ElCollapseItem name="2">
            <template #title>
              <span class="pl-12px font-size-18px">调用示例（仅java）</span>
            </template>
            <div class="mt-20px">
              <BaseButton @click="resetContent">重置</BaseButton>
              <div class="edit-container h-300px pr-20px mb-12px">
                <CodeEditor ref="MonacoEditRef" v-model="content" language="java" :language-selector="false" />
              </div>
            </div>
          </ElCollapseItem>
        </ElCollapse>
        <ElCollapse v-model="thirdActiveNames" class="mt-12px">
          <ElCollapseItem name="3">
            <template #title>
              <span class="pl-12px font-size-18px">结果示例</span>
            </template>
            <JsonEditor class="mt-12px" v-model="result" />
          </ElCollapseItem>
        </ElCollapse>
      </div>
    </div>
  </ContentWrap>
</template>

<style lang="scss">
.el-collapse-item__header {
  background: #f2f9ff;
}
</style>

<style lang="scss" scoped>
:deep(.my-label) {
  background-color: #f2f9ff
}
</style>
